<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="Query.name" placeholder="景点名"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="Query.scenicType" clearable placeholder="类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="Query.place" clearable placeholder="地址">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      border
      :default-sort = "{prop: 'createTime', order: 'descending'}"
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="景点名" width="90"/>

      <el-table-column prop="scenicType" label="类型" width="70"/>

      <el-table-column prop="place" label="地点" :show-overflow-tooltip='true' width="100"/>

      <el-table-column prop="scenicDescription" label="描述" :show-overflow-tooltip='true' />


      <el-table-column prop="scenicUrl" label="图片">
        <template slot-scope="scope">
        	<el-popover
        		placement="right"
        		width="200"
        		trigger="hover">
        		<img :src="scope.row.scenicUrl" class="imgStyle"/>
        		<img slot="reference" :src="scope.row.scenicUrl" style="max-height: 50px;max-width: 150px">
        	</el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" sortable label="创建时间" :formatter="dateFormat" width="152"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/jingdian/info/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

  </div>
</template>
<script>
//引入调用scenic.js文件
import scenic from '@/api/tourist/scenic'
//时间戳格式化
import moment from 'moment'
export default {
    //写核心代码位置
    // data:{
    // },
    data() { //定义变量和初始值
        return {
          list:null,//查询之后接口返回集合
          page:1,//当前页
          limit:10,//每页记录数
          total:0,//总记录数
          Query:{}, //条件封装对象
          options:[{
                    value: '选项1',
                    label: '自然'
                  }, {
                    value: '选项2',
                    label: '人文'
                  }, {
                    value: '选项3',
                    label: '建筑'
                  }, {
                    value: '选项4',
                    label: '历史'
                  }],
          options2:[{
                    value: '选项1',
                    label: '东园区'
                  }, {
                    value: '选项2',
                    label: '南园区'
                  }, {
                    value: '选项3',
                    label: '西园区'
                  }, {
                    value: '选项4',
                    label: '北园区'
                  },{
                    value: '选项5',
                    label: '中心'
                  }],
        }

    },
    created() { //页面渲染之前执行，一般调用methods定义的方法
        //调用
        this.getList()
    },
    methods:{  //创建具体的方法，调用scenic.js定义的方法
        getList(page=1) {
            this.page = page

            scenic.getListPage(this.page,this.limit,this.Query)
                .then(response =>{//请求成功
                    //response接口返回的数据
                    //console.log(response)
                    this.list = response.data.rows
                    this.total = response.data.total
                    console.log(this.list)
                    console.log(this.total)
                })
        },
        dateFormat:function(row, column) {
            var date = row[column.property];
            if (date == undefined) {
                return "";
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
        },
        resetData() {//清空的方法
            //表单输入项数据清空
            this.Query = {}
            //查询所有景点数据
            this.getList()
        },
        //删除景点的方法
        removeDataById(id) {
            this.$confirm('此操作将永久删除用户记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定，执行then方法
                //调用删除的方法
                scenic.deletebyId(id)
                    .then(response =>{//删除成功
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //回到列表页面
                    this.getList()
                })
            }) //点击取消，执行catch方法
        }


    }
}
</script>
